<template>
	<view style="display: flex; justify-content: center;align-items: center; padding-top: 80rpx;">
		<u-avatar src="/static/logo.png" size="140"></u-avatar>
	</view>

	<view style="padding: 80rpx;">
		<u-form :model="form" ref="form1">
			<u-form-item left-icon="account-fill" :left-icon-style="leftIconStyle">
				<u-input placeholder="请输入账户" v-model="form.username"></u-input>
			</u-form-item>
			<u-form-item left-icon="lock" :left-icon-style="leftIconStyle">
				<u-input placeholder="请输入密码" type="password" v-model="form.password"></u-input>
			</u-form-item>

			<view style="display: flex; justify-content: flex-end;color:#ff7670;margin-top: 30rpx;" @click="toForgetPass">
				忘记密码
			</view>
			<u-button :custom-style="buttonLoginStyle" @click="toCommit">登录</u-button>
			<u-button :custom-style="buttonRegistrationStyle" @click="toRegister">注册</u-button>
		</u-form>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import { loginApi } from '../../api/user.js'

	const form = reactive({
		username: '',
		password: ''
	})
	const leftIconStyle = {
		fontSize: '68rpx',
		color: '#ff7670'
	}

	const buttonStyle = {
		marginTop: '30rpx',
		color: '#fff'
	}

	const buttonLoginStyle = {
		...buttonStyle,
		backgroundColor: '#ff7670'
	}
	const buttonRegistrationStyle = {
		...buttonStyle,
		backgroundColor: '#00cc33'
	}

	const toRegister = () => {
		uni.navigateTo({
			url: "../login/login"
		})
	}

	const toCommit = async () => {
		if (!form.username) {
			uni.showToast({
				title: '请输入账号',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		
		if (!form.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		let res = await loginApi(form)
		if (res && res.code == 200) {
			uni.setStorageSync('userId', res.data.userId)
			uni.switchTab({
				url: '../index/index'
			})
		}
	}
	
	// 跳转忘记密码页面
	const toForgetPass = () => {
		uni.navigateTo({
			url: '../forget_password/forget_password'
		})
	}
	
</script>

<style>

</style>